<template>
    <div id="descript">
        <div class="scenic">
            <h3>主要景点</h3>
            <div v-for="(item,index) in descript.scenic" :key="index" class="info-desc clear-fix">
                <div class="start"></div>
                <br>
                <h4 class="descript-name">{{item.name}}</h4>
                <div>{{item.title}}</div>
                <div class="end"></div>
                <br><br>
            </div>
        </div>
        <div class="history">
            <h3>历史沿革</h3>
            <div v-for="(item,index) in descript.history" :key="index" class="info-desc clear-fix">
                <div class="start"></div>
                <br>
                <h4 class="descript-name">{{item.name}}</h4>
                <div>{{item.title}}</div>
                <div class="end"></div>
                <br><br>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'DetailDescriptInfo',
    props: {
		  descript: {
		    type: Object
      }
    }
}
</script>
<style scoped>
.scenic {
    margin-top: 15px;
    border-bottom: 5px solid #f2f5f8;
}
.scenic h3{
    color: red;
    text-align: center;
}
.history {
    margin-top: 15px;
    border-bottom: 5px solid #f2f5f8;
}
.history h3 {
    color: red;
    text-align: center;
}
.descript-name {
    color: rgb(57, 169, 235);
}
.info-desc {
    padding: 0 15px;
  }

  .info-desc .start, .info-desc .end {
    width: 90px;
    height: 1px;
    background-color: #a3a3a5;
    position: relative;
  }

  .info-desc .start {
    float: left;
  }

  .info-desc .end {
    float: right;
  }

  .info-desc .start::before, .info-desc .end::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: #333;
    bottom: 0;
  }

  .info-desc .end::after {
    right: 0;
  }

  .info-desc .desc {
    padding: 15px 0;
    font-size: 14px;
  }

</style>